var userButtonId = lastTop = 0;
var slided = 1;
var lastLeft = 2;
var width = 652;
var userArr = new Array();
var count = 0;

function replaseEl() {
    lastLeft = 2;
    $('.wrapMessEl').each(function() {
        $(this).css({'left':lastLeft, 'top':lastTop});
        lastLeft += $(this).width() + 3;
    });
}

function autoComlete(val) {
    if(val.length > 2) {
        $('#autoComplete').load('/ajax/getUsernames', 'login='+val, function() {
            $('#listUser-messages ul li').click(function(){
                checkUser($(this).html());
                $('#autoComplete').css({'display':'none'});
            });
        });
        $('#autoComplete').css({'display':'block'});
    } else $('#autoComplete').css({'display':'none'});
}

function delUser(id) {
    $('#wrap'+id).remove();
    replaseEl();
    var width =  550 - lastLeft;
    $('#adressInput').css({'width':width, 'left':lastLeft, 'top':lastTop});
    count -= 1;
    var pad = lastTop + 10;
    $('#adressContainer').css({'padding-bottom':pad + 'px'});
    userArr.splice(id,1);
    if(count < 5 && $('.error').css('display') == 'block') {
        $('.error').css({'display':'none'});
    } 
}

function checkUser(userName) {
    $.get('/ajax/checkUserName', 'login='+userName, function(data){
        $('#autoComplete').css({'display':'none'});
        if(data && userName != userLogin && $.inArray(data, userArr) === -1 && count < 5) {
            addUser(userName + ',', data);
        }
        else $('#adressInput').val('');
    });
}

function addUser(val, id) {
    var userName = val.slice(0, -1);
    if(userName.length > 8) {
        var text = val.slice(0, 8-val.length) + '...';
    } else var text = userName;

    var userButton = '<span class="wrapMessEl" id="wrap'+userButtonId+'" style="position: absolute; top:'+lastTop+'px; left:'+lastLeft+'px;"><span class="messageElement">'+text+'<span class="messageDelBtn" id="messageDelBtn'+userButtonId+'">x</span></span></span>';
    $('#adressContainer').append(userButton);

    var width = parseInt($('#adressInput').css('width')) - parseInt($('#wrap'+userButtonId).width() + 3);
    var left = parseInt($('#adressInput').css('left')) + parseInt($('#wrap'+userButtonId).width() + 3);
    $('#adressInput').css({'width':width, 'left':left});

    lastLeft += $('#wrap'+userButtonId).width() + 3;

    $('#messageDelBtn'+userButtonId).click(function() {
        var id = Number($(this).attr('id').replace(/\D+/g,''));
        delUser(id);
    });

    $('#wrap'+userButtonId).mousedown(function(){return false;});

    userArr[userButtonId] = id;
    count++;
    userButtonId++;
    $('#adressInput').val('');
}

$(document).ready(function() {
    $('#adressInput').keypress(function() {
        if($(this).val() == ',') $(this).val('');
    });

    $('#submitButton').click(function(){
        $('#usersTo').attr({'value':userArr.toString()});
        $('#messageForm').submit();
    });

    $('#showOrHideForm').click(function() {
        if(slided) {
            $('#formContainer').slideDown(600);
            slided = 0;
        } else {
            $('#formContainer').slideUp(600);
            slided = 1;
        }
    });

    $('#adressInput').keyup(function() {                
        var val = $(this).val();
        if(val == ',') $(this).val('');
        autoComlete(val);
        if(val.length < 2 || val.charAt(val.length - 1) != ',') return 0;
        if(count >= 5) {
            $('.error').css({'display':'block'});
            $(this).val('');
            return 0;
        }
        checkUser(val.slice(0, -1));
    });
});